import React, { Component } from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import { BrowserRouter  as Router, Route, Link } from "react-router-dom";

import Nav1 from '../nav1/Nav1';
import Nav2 from '../nav2/Nav2';
import Nav3 from '../nav3/Nav3';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;
class SildeBar extends Component {
  constructor(props) {
    super(props);
    //react定义数据
    this.state = {
    }
  }
  render() {
    return (
      <Router>
        <Layout>
          <Header className="header">
            <div className="logo" />
            <Menu
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={['1']}
              style={{ lineHeight: '64px' }}
            >
              <Menu.Item key="1"><Link to="/nav1">nav 1</Link></Menu.Item>
              <Menu.Item key="2"><Link to="/nav2">nav 2</Link></Menu.Item>
              <Menu.Item key="3"><Link to="/nav3">nav 3</Link></Menu.Item>
            </Menu>
          </Header>
          <Layout>
            <Sider width={200} style={{ background: '#fff' }}>
              <Menu
                mode="inline"
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sub1']}
                style={{ height: '100%', borderRight: 0 }}
              >
                <SubMenu
                  key="sub1"
                  title={
                    <span>
                      图表相关
                      </span>
                  }
                >
                  <Menu.Item key="1"> 统计图</Menu.Item>
                  <Menu.Item key="2"> table统计图</Menu.Item>
                  <Menu.Item key="3">树形菜单</Menu.Item>

                </SubMenu>
                <SubMenu
                  key="sub2"
                  title={
                    <span>
                      数据请求
                      </span>
                  }
                >
                  <Menu.Item key="5"> 表格</Menu.Item>
                  <Menu.Item key="6"> 树形控件</Menu.Item>
                  <Menu.Item key="7">Tab</Menu.Item>
                  <Menu.Item key="8">Nav</Menu.Item>
                </SubMenu>
                <SubMenu
                  key="sub3"
                  title={
                    <span>
                      ant组件
                      </span>
                  }
                >
                  <Menu.Item key="9">轮播图</Menu.Item>
                  <Menu.Item key="10">卡片效果</Menu.Item>
                  <Menu.Item key="11">add</Menu.Item>
                  <Menu.Item key="12">option12</Menu.Item>
                </SubMenu>
              </Menu>
            </Sider>
            <Layout style={{ padding: '0 24px 24px' }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>Home</Breadcrumb.Item>
                <Breadcrumb.Item>List</Breadcrumb.Item>
                <Breadcrumb.Item>App</Breadcrumb.Item>
              </Breadcrumb>
              <Content
                style={{
                  background: '#fff',
                  padding: 24,
                  margin: 0,
                  minHeight: 600,
                }}
              >
                <Route exact path="/nav1" component={Nav1} />
                <Route exact path="/nav2" component={Nav2} />
                <Route exact path="/nav3" component={Nav3} />
                
              </Content>
            </Layout>
          </Layout>
        </Layout>

      </Router>
    )
  }
}
export default SildeBar;

